<!-- Author:Rain -->
<template>
    <li>
        <div class="avatar">
            <el-badge :value="Math.random()>0.5?'♀':'♂'" >
                <el-avatar shape="square" size="large" :src="geek.geekInfo.pic" />
            </el-badge>
            <el-tag type="primary" style="margin-top: 6px;">15-23K</el-tag>
        </div>
        <div class="geekinfo">
            <div class='geekname'>{{geek.geekInfo.name}}</div>
            <div class="basicinfo">
                <span>{{geek.geekInfo.age}}</span>
                <span class="vline"></span>
                <span>{{geek.geekInfo.status}}</span>
                <span class="vline"></span>
                <span>{{geek.geekInfo.grade}}</span>
                <span class="vline"></span>
                <span>{{ geek.geekInfo.state }}</span>
            </div>
            <div class="expect">
                <span>期望：</span>
                <span>{{geek.expect.address}}</span>
                <span class="vline"></span>
                <span>{{geek.expect.pos}}</span>
            </div>
            <div class="advantage">
                <span>优势：</span>
                {{geek.advantage}}
            </div>
            <div class="tags">
                <el-tag v-for="tag in geek.tags" class="tag" size="small">{{ tag }}</el-tag>
            </div>
        </div>
        <div class="timeline">
            <div class="trueline">
                <span>工作</span>
                <span class="dashline"></span>
                <span>学习</span>
            </div>
            <div class="content">
                <p v-for="item,index in geek.timeline" :key="index">
                    <span class="time">{{ item.time }}</span>
                    <span class='company'>{{item.company}}</span>
                    <span class="Raindot"></span>
                    <span class="position">{{item.position}}</span>
                    <span class="Raindot"></span>
                    <span class="grade">{{item.grade}}</span>
                </p>
            </div>
        </div>
        <div class="todo">
            <el-button type="primary" @click="goToChat">去沟通</el-button>
        </div>
    </li>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useWebSocketStore} from '@/store/modules/websocket'
import { useSystemStore } from '@/store/modules/system'
const router = useRouter()
const webSocketStore = useWebSocketStore();
const systemStore = useSystemStore();
const userId = 86;
const touserId = 88;
const state =reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl: "https://static-qiniu.lanqiao.cn/avatar/uid3795694-20240116-1705404820858?imageView2/1/w/90/h/90/",
    // 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
})
// ♀/♂


// 创建一个聊天或者进行聊天
const goToChat = () => {
    let ids = {
        userId: userId,
        touserId: touserId,
    }
    webSocketStore
    .getOneByOne(ids)
    .then((res) => {
        let {code,data,msg} = res.data;
        if(code !== 200){
            console.log(msg);
            return;
        }
        let dialogueInfo = {
            username:'黄文杰',
            tousername:'黄石北',
            userProfile:data.userProfile,
            touserProfile:data.touserProfile,
            type:'私发',
            userUuid:data.userUuid,
            touserUuid:data.touserUuid
        };
        systemStore.curTab = "message";
        router.push(
            {
                path: '/boss/chat',
                state: {
                    dialogueInfo: JSON.stringify(dialogueInfo),
                },
            }
        )
        
    })
}

//目前进行mock模拟数据
const props=defineProps(['data'])
const {data:geek}=props
console.log(geek);


</script>

<style scoped lang="less">
:has(.basicinfo,.expect,.advantage,p)>span{
    font-size: 12px;
}
li {
    width: 1180px;
    height: 180px;
    background-color: #fff;/* rgba(0, 23, 111, 0.1) */
    box-shadow: 2px 4px 8px 0px RGB(177, 125, 184);
    margin-bottom: 20px;
    border-radius: 10px;
    display: flex;

    .avatar {
        flex-basis: 100px;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .geekinfo {
        flex-basis: 350px;
        display: flex;
        flex-direction: column;
        padding: 20px 10px;

        div {
            padding: 2px 0;
        }

        .geekname {
            font-size: 20px;
            font-weight: 700;
        }

        .basicinfo {
            span {
                font-weight: 500;
            }
        }

        .expect {
            span:first-child {
                color: rgba(0, 0, 0, 0.5);
            }
        }

        .advantage {
            span:first-child {
                color: rgba(0, 0, 0, 0.5);
            }
        }

        .tags {
            .tag {
                margin: 0 5px;
            }
        }
    }

    .timeline {
        flex-basis: 600px;
        height: auto;
        padding: 20px 10px;
        display: flex;

        .trueline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 40px;
            flex-direction: column;

            .dashline {
                flex: 1;
                border: 1px dashed rgba(0, 23, 111, 0.3);
            }
        }

        .content {
            width: 100%;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            p {
                vertical-align: middle;
                width: 100%;

                span {
                    display: inline-block;
                }
            }

            span.time {
                width: 150px;
            }

            span.company {}

            span.Raindot {
                width: 2px;
                height: 2px;
                background-color: grey;
                border: 1px solid grey;
                display: inline-block;
                margin: 0 10px;
                position: relative;
                top: -3px;
            }

        }
    }

    .todo {
        flex-grow: 1;
        padding: 20px;
    }
}
</style>